<template>
  <el-menu
    :default-active="defaultPath"
    class="flex-1"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <el-menu-item :index="item.path" v-for="item in menus">
      <template #title>{{ item.title }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
const defaultPath = ref(route.path)
console.log(defaultPath);

const menus = ref([
  {
    title: "系统配置",
    icon: "",
    path: "/config",
  },
  {
    title: "相册列表",
    icon: "",
    path: "/album",
  },
  {
    title: "内容管理",
    icon: "",
    path: "/content",
  },
  {
    title: "容量套餐",
    icon: "",
    path: "/capacity",
  },
  {
    title: "订单管理",
    icon: "",
    path: "/order",
  },
  {
    title: "用户管理",
    icon: "",
    path: "/user",
  },
]);
const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

router.afterEach((to, from) => {
  // to and from are both route objects.
  defaultPath.value = to.path
  
})
</script>

<style></style>
